<template>
	<!-- 公告组件 -->
	<view v-if="show" class="zan-noticebar--within-icon"  :style="[{'color': color }, {'background-color': backgroundColor}, {'padding-top': padding},{'padding-left':paddingLeft},{'padding-right':paddingLeft},{'padding-bottom': padding}]">
		<view v-if="leftIcon" class="zan-noticebar__left-icon" style="float: left;">
			<image :src="leftIcon" />
		</view>
		<view class="zan-noticebar__content-wrap">
			<view class="zan-noticebar__content" :animation="animationData">
				{{ text }}
			</view>
		</view>

		<block v-if="mode">
			<zan-icon v-if="mode === 'closeable'" class="zan-noticebar__right-icon" type="close" bindtap="_handleButtonClick" />
			<navigator v-if="mode === 'link'" :url="url" :open-type="openType">
				<zan-icon class="zan-noticebar__right-icon" type="arrow" />
			</navigator>
		</block>

	</view>
</template>



<script>
	'use strict';

	var VALID_MODE = ['closeable'];
	var FONT_COLOR = '#f60';
	var BG_COLOR = '#fff7cc';

	export default {
		computed: {
			padding() {
				// console.log(this.paddingTop);
				return uni.upx2px(this.paddingTop * 2) + 'px';
			}
		},
		props: {
			paddingTop: {},
			leftIcon: {},
			text: {},
			color: {},
			backgroundColor: {},
			// scrollable: {},
			text: {
				type: String,
				value: '',
				observer: function observer(newVal) {
					this.setData({}, this.initss);
				}
			},
			mode: {
				type: String,
				value: ''
			},
			animationData: {
				type: String,
				value: ''
			},
			url: {
				type: String,
				value: ''
			},
			openType: {
				type: String,
				value: 'navigate'
			},
			delay: {
				type: Number,
				value: 0
			},
			speed: {
				type: Number,
				value: 40
			},

			leftIcon: {
				type: String,
				value: ''
			},
			color: {
				type: String,
				value: FONT_COLOR
			},
			backgroundColor: {
				type: String,
				value: BG_COLOR
			},
			paddingTop: {
				type: String,
				value: 4
			}
		},

		data() {
			return {
				show: true,
				hasRightIcon: false,
				width: undefined,
				wrapWidth: undefined,
				elapse: undefined,
				animation: null,
				resetAnimation: null,
				paddingLeft: '10px',
				scrollable:'true',
				timer: null
			}
		},

		attached: function attached() {
			var mode = this.data.mode;

			if (mode && this._checkMode(mode)) {
				this.setData({
					hasRightIcon: true
				});
			}
		},
		detached: function detached() {
			var timer = this.data.timer;

			timer && clearTimeout(timer);
		},


		methods: {
			_checkMode: function _checkMode(val) {
				var isValidMode = ~VALID_MODE.indexOf(val);
				if (!isValidMode) {
					console.warn('mode only accept value of ' + VALID_MODE + ', now get ' + val + '.');
				}
				return isValidMode;
			},
			initss: function initss() {
				var _this = this;

				uni.createSelectorQuery().in(this).select('.zan-noticebar__content').boundingClientRect(function(rect) {
					if (!rect || !rect.width) {
						return;
					}
					_this.setData({
						width: rect.width
					});

					uni.createSelectorQuery().in(_this).select('.zan-noticebar__content-wrap').boundingClientRect(function(rect) {
						if (!rect || !rect.width) {
							return;
						}

						var wrapWidth = rect.width;
						var _data = _this.data,
							width = _data.width,
							speed = _data.speed,
							scrollable = _data.scrollable,
							delay = _data.delay;


						if (scrollable && wrapWidth < width) {
							var elapse = width / speed * 1000;
							var animation = uni.createAnimation({
								duration: elapse,
								timeingFunction: 'linear',
								delay: delay
							});
							var resetAnimation = uni.createAnimation({
								duration: 0,
								timeingFunction: 'linear'
							});

							_this.setData({
								elapse: elapse,
								wrapWidth: wrapWidth,
								animation: animation,
								resetAnimation: resetAnimation
							}, function() {
								_this._scroll();
							});
						}
					}).exec();
				}).exec();
			},
			_scroll: function _scroll() {
				var _this2 = this;

				var _data2 = this.data,
					animation = _data2.animation,
					resetAnimation = _data2.resetAnimation,
					wrapWidth = _data2.wrapWidth,
					elapse = _data2.elapse,
					speed = _data2.speed;

				resetAnimation.translateX(wrapWidth).step();
				var animationData = animation.translateX(-(elapse * speed) / 1000).step();
				console.log(animationData);
				this.animationData = resetAnimation.export();
				setTimeout(function() {
					this.animationData = animationData.export();
				}, 100);

				var timer = setTimeout(function() {
					_this2._scroll();
				}, elapse);

				this.setData({
					timer: timer
				});
			},
			_handleButtonClick: function _handleButtonClick() {
				var timer = this.data.timer;

				timer && clearTimeout(timer);
				this.setData({
					show: false,
					timer: null
				});
			}
		}
	};
</script>

<style>
	.zan-noticebar {
		display: -webkit-box;
		display: flex;
		font-size: 52upx;
		line-height: 1.5;
	}

	.zan-noticebar--within-icon {
		position: relative;
		padding-right: 60upx;
		
	}

	.zan-noticebar__left-icon {
		height: 36upx;
		min-width: 40upx;
		padding-top: 2upx;
		box-sizing: border-box;
		padding-left:30upx;
	}

	.zan-noticebar__left-icon>image {
		width: 32upx;
		height: 32upx;
	}

	.zan-noticebar__right-icon {
		position: absolute;
		top: 20upx;
		right: 20upx;
		font-size: 30upx;
		line-height: 2;
	}

	.zan-noticebar__content-wrap {
		position: relative;
		-webkit-box-flex: 1;
		flex: 1;
		height: 43upx;
		overflow: hidden;
		margin-bottom: 5px;
		line-height: 50upx;
	}

	.zan-noticebar__content {
		position: absolute;
		white-space: nowrap;
		font-size: 28.55upx;
	}
</style>
